﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel Component</title>
    <link rel="stylesheet" href="styles/01-accordion.css">
    <link rel="stylesheet" href="styles/02-carousel.css">
</head>
<body>
<div class="carousel">
    <img src="img/2.jpg" alt="">
    <blockquote class="testimonial">
        <p class="testimonial-text">
            Mr. and Mrs. Dursley, of number four, Privet Drive, were proud
            to say that they were perfectly normal, thank you very much. They
            were the last people you'd expect to be involved in anything
        </p>
        <p class="testimonial-author">
            Maria de Almeida
        </p>
        <p class="testimonial-job">Senior Product Manager at EDP Comerical</p>
    </blockquote>
    <button class="btn btn--left">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
        </svg>
    </button>
    <button class="btn btn--right">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg>
    </button>

    <div class="dots">
        <button class="dot dot-fill">&nbsp;</button>
        <button class="dot">&nbsp;</button>
        <button class="dot">&nbsp;</button>
        <button class="dot">&nbsp;</button>
    </div>

</div>
</body>
</html>